<template lang="pug">
  .global-overview
    .title 站点分布
    .main-content
      el-tabs(v-model="activeName" @tab-click="tabsClick")
        el-tab-pane(v-for="tab in tabs" :label="tab.name" :name="tab.key") {{tab.name}}
      .chart-content(v-if="activeName === 'chart'")
        .info-item.drill-type
            .item-title 钻孔分类
            .bar-chart(ref="barChart")
      .list-content(v-if="activeName === 'list'")
        el-button(size="mini" @click="removeLayers") 移除
        el-button(size="mini" @click="loadGeoJsonData") 从GeoJson加载数据
        el-button(size="mini" @click="loadCustomStyle") 从GeoJson加载数据，并设置样式
        el-button(size="mini" @click="loadFeatures") 逐个添加要素
</template>

<script>
import { Circle as CircleStyle, Fill, Icon, Stroke, Style } from 'ol/style'
import olBasicUtils from '../../scripts/olBasicUtils'

export default {
  name: 'boreholeInfo',
  data () {
    return {
      publicPath: process.env.BASE_URL,
      activeName: 'list',
      tabs: [{ name: '列表', key: 'list' }, { name: '分布', key: 'chart' }, { name: '特性', key: 'sss' }],
      layerIds: []
    }
  },
  watch: {
    activeName (newV) {
      this.$nextTick(() => {
        if (newV === 'chart') this.initPie()
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.loadPoint()
    })
  },
  methods: {
    // 加载GeoJson
    // https://openlayers.org/en/latest/examples/feature-move-animation.html
    // https://blog.csdn.net/qq_40482342/article/details/112913596
    loadGeoJsonData () {
      this.removeLayers()
      this.loadPoint()
      this.loadLine()
      this.loadPolygon()
    },

    // 加载点、线、面
    async loadPoint () {
      const points = await import('@data/json/point.json')
      const style = new Style({
        image: new CircleStyle({
          radius: 5,
          fill: new Fill({
            color: 'rgba(255, 0, 0, 1)'
          }),
          stroke: new Stroke({ color: 'yellow', width: 1 })
        })
      })
      olBasicUtils.addGeojsonLayer('test-point', points.default, style)
      this.layerIds.push('test-point')
    },
    async loadLine () {
      const lines = await import('@data/json/line.json')
      const style = new Style({
        stroke: new Stroke({
          color: '#4e89d4',
          width: 2
        }),
        fill: new Fill({
          color: '#eee'
        })
      })
      olBasicUtils.addGeojsonLayer('test-line', lines.default, style)
      this.layerIds.push('test-line')
    },
    async loadPolygon () {
      const points = await import('@data/json/polygon.json')
      const style = new Style({
        stroke: new Stroke({
          color: '#4e89d4',
          width: 1
        }),
        fill: new Fill({
          color: '#eee'
        })
      })
      olBasicUtils.addGeojsonLayer('test-polygon', points.default, style)
      this.layerIds.push('test-polygon')
    },

    // 定制样式的点线面
    async loadCustomStyle () {
      this.removeLayers()
      const points = await import('@data/json/point.json')
      olBasicUtils.addGeojsonLayer('test-custom', points.default, (faeture) => {
        if (faeture.get('type') === 'c1') {
          return new Style({
            image: new Icon({
              anchor: [0.5, 1], // 圆形图标时：[0.5, 0.5]
              src: require('@assets/image/map/水泵.png'),
              scale: 1
            })
          })
        } else {
          return new Style({
            image: new CircleStyle({
              radius: 5,
              fill: new Fill({
                color: 'rgba(255, 344, 22, 1)'
              }),
              stroke: new Stroke({ color: 'red', width: 1 })
            })
          })
        }
      })
      this.layerIds.push('test-custom')
    },

    // 逐个添加要素
    loadFeatures () {
      //
    },

    // 切换tab
    tabsClick () {
      // console.log(123)
    },
    // 引入echarts
    initPie () {
      console.log('dada')
      const chartDom = this.$refs.barChart
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom)
      // 绘制图表
      const option = {
        grid: {
          top: '16%',
          left: '4%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['地质', '水文', '勘探', '工程', '基准', '地震'],
          axisLabel: {
            color: '#000',
            fontSize: 14
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [520, 200, 150, 80, 70, 110],
            type: 'bar',
            barWidth: 20
          }
        ]
      }

      myChart.setOption(option)
    },

    removeLayers () {
      olBasicUtils.removeLayerByIds(this.layerIds)
      this.layerIds = []
    }
  },
  beforeDestroy () {
    this.removeLayers()
  }
}
</script>

<style lang="stylus" scoped>
.global-overview
    width 100%
    height calc(100% - 164px)
    position: absolute;
    .title
        position: absolute;
        top: -48px;
        color: white;
        font-size: 24px;
        left: 18px;
        text-shadow 2px 2px 5px #0e0e0e

.main-content
    display flex
    flex-direction column
    .info-item
        padding 12px
        margin-bottom 12px
        background-color rgba(248,248,251,0.8);
        border-radius 8px
        box-shadow: 0px 0 3px -2px rgb(53 71 33 / 67%)
.drill-type
    height 240px
    width 100%
    display flex
    flex-direction column
    .item-title
        color #8283b2
        font-size 14px
    .bar-chart
        width 100%
        height 180px

.el-tabs
  >>>.el-tabs__content
    display none
  >>>.el-tabs__nav
    padding 0 20px
    font-size 20px
    .el-tabs__active-bar
      margin-left 20px
.list-content
  .plist-item
    padding: 8px
    border-bottom: 1px solid #d0d0d0
</style>
